<template>
	
	<view class="">
		<view style="margin: 30rpx;">
			<image class="chat-avatar" :src="src" mode="aspectFit" @click="changeProfile"></image>
			<text style="position: absolute; top:20rpx;left:230rpx;font-size: 45rpx;" @click="changeUserInfo('用户名')">{{username}}</text>
			<text style="position: absolute; top:100rpx;left:230rpx;font-size: 25rpx;" @click="changeUserInfo('个人简介')">{{desc}}</text>
			<navigator :url="navigatorPath" style="float: right;margin-top: 20rpx;color:#8f8e85">{{navigatorText}}></navigator>
		</view>
		<uni-list>
			<uni-list-item showArrow title="我的讨论" @click="goCard" clickable="true"/>
			<uni-list-item showArrow title="我申请的书籍" @click="goBookCard" clickable="true"/>
		</uni-list>
		
	</view>
	
		<uni-popup ref="popup" type="bottom" style="width: 100%;height: 200rpx;" safe-area="true">
			<view style="background-color: white;width: 100%;height: 700rpx">
				<view style="padding:50rpx;" class="title">
					修改{{changeInfo}}
				</view>
				<view style="margin-left: 50rpx;height: 150rpx;width: 650rpx;margin-bottom: 50rpx;"><input class="uni-input" v-model="updateValue" focus :placeholder="'请输入'+changeInfo" style="font-size: 40rpx;"/></view>
				<button style="width: 80%;background-color: coral;color: white;" @click="submitUpdate">确定</button>
			</view>
		</uni-popup>
	
	
</template>

<script setup>
	import {onShow} from "@dcloudio/uni-app"
	import {ref} from "vue"
	import { baseUrl } from "../../static/js/util.js";
	import { updateProfile , updateUserInfo , updateFile } from "../../static/js/api.js";
	let userInfo={}
	let title="home"
	let src=ref('../../static/logo.png')
	let username=ref("")
	let desc=ref("这个人很懒,什么都没有写")
	let navigatorText=ref('登录')
	let navigatorPath=ref('/pages/login/login')
	const popup=ref(null)
	let changeInfo=ref('')
	
	function goBookCard(){
		if(userInfo==null){
			uni.showToast({
				icon:'error',
				title:'请先登录'
			})
			return;
		}
		uni.navigateTo({
			url:'/pages/cards/bookCards?userId='+userInfo.id
		})
	}
	
	function goCard(){
		if(userInfo==null){
			uni.showToast({
				icon:'error',
				title:'请先登录'
			})
			return;
		}
		uni.navigateTo({
			url:'/pages/cards/cards?userId='+userInfo.id
		})
	}
	
	function changeUserInfo(params){
		if(userInfo!=null){
			changeInfo.value=params;
			popup.value.open('bottom')
		}
	}
	
	function changeProfile(){
		let userStr=localStorage.getItem('user')
		if(userStr==null){
			uni.showToast({
				icon:'error',
				title:'请先登录'
			})
			return
		}
		userInfo=JSON.parse(userStr)
		uni.chooseImage({
			success:(res)=> {
				src.value=res.tempFilePaths[0]
				let url=baseUrl+"/file/uploadImage"
				updateFile(url,res,userInfo,baseUrl)

			}
		})
	}
	
	let updateValue='';
	function   submitUpdate(){
		if(updateValue===''||updateValue===null){
			uni.showToast({
				icon:'error',
				title:'请先填写要修改的内容'
			})
			return ;
		}
		console.log(userInfo.id)
		let params={
			id:userInfo.id,
		}
		if(changeInfo.value==='用户名'){
			params.username=updateValue
		}
		else if(changeInfo.value==='个人简介'){
			params.desc=updateValue
		}
		let url=baseUrl+"/user/updateUserInfo"
		let update = updateUserInfo(url,params,showTheUser)
		
		setTimeout(() => {
			popup.value.close()
		}, 500)
		
	}
	
	onShow(()=>{
		 let user=localStorage.getItem("user")
		
		if(user===null){
			username.value="未登录"
			src.value='../../static/logo.png'
			desc.value='这个人很懒,什么都没有写'
			navigatorText.value='登录'
		}
		else{
			navigatorText.value='退出登录'
			userInfo=JSON.parse(user);
			showTheUser()
		}
	})
	
	function showTheUser(nowUsername,nowDesc){
		username.value=nowUsername==null?userInfo.username:nowUsername
		desc.value=nowDesc!=null?nowDesc:(userInfo.desc===null?'这个人很懒,什么都没有写':userInfo.desc)
		src.value=userInfo.profilePath
	}
</script>

<style lang="scss" scoped>
	.chat-avatar{
		
		width: 150rpx;
		/* 头像宽度 */
		height: 150rpx;
		/* 头像高度 */
		border-radius: 50%;
		/* 如果需要圆形头像 */
		margin-left: auto;
		/* 使头像靠右 */
	}
	
	.title {
			font-size: 60rpx;
			/* 标题字号 */
			color: #333;
			font-weight: 1000;
			/* 标题颜色 */
		}

</style>
